<template>
	<view class="communication-report">
		<!-- 汇报列表 -->
		<template v-if='!isNew'>	
			<view class="reportcontainer" >
				<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);" @scrolltolower="loadMore">
				<view class="reportitem" v-for="(item,index) in list">
					<view class="reporttitleline">
						<view class="reporttitlepic">
							<view class="reporttitlepicinner">{{item.createUserName}}</view>
						</view>
						<view class="reportuser">{{item.createUserName}}</view>
						<view class="reportdatetime">{{item.createTime | dateFormat}}</view>
					</view>
					<view class="reportContent">
						<view class="reportsalfExe">{{item.content}}</view>
						<view class="reportsalfExecontent">
							<view class="reportsalfExeimg">
							</view>
							<view class="reportsalfExeimg">
							</view>
							<view class="reportsalfExeimg">
								<image src="../../../../static/icon/18.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
			<view class="botton-btn-st" v-show="!isNew">
				<button type="primary" @click="isNew=true"  >新建汇报</button>
			</view>
		</template>
		<!-- 新建汇报 -->
		<communication-reporttwo v-else :dataInfo="dataInfo"/>
	</view>
</template>

<script>
	import {
		getCommunicatePage,getTicketDetail
	} from '@/api/operationPicket.js'
	import CommunicationReporttwo from "./CommunicationReportTwo.vue";
	export default {
	    data() {
	        return {
				isNew: false,
				current:1,
				size:10,
				pages:1,
				list:[],
				dataInfo:{}
	        }
	    },
	    components: {
			CommunicationReporttwo
	    },
		mounted() {
			this.getCommunicateList()
			this.queryTicketDetail()
		},
		props:{
			otId:{
			   type:String
			}
		},
	    methods: {
			queryTicketDetail() {
				getTicketDetail({
					otId: this.otId
				}).then(res => {
					this.dataInfo = res.result.result
				})
			},
			reload(){
				this.isNew = false
				this.current = 1
				this.list = []
				this.getCommunicateList()
			},
			// 加载更多
			loadMore(){
				const {current,pages} = this
				if(current<=pages) {			
					
					this.getCommunicateList()
				}
			},
			/*
			 * 沟通汇报列表
			 **/
			getCommunicateList(){
				getCommunicatePage({
					current: this.current,
					size:this.size
				}).then(res => {
					this.current++
					this.list = this.list.concat( res.result.result.records)
					this.pages = res.result.result.pages
				})
			},
	    }
	}
</script>

<style  lang="scss">
	.communication-report {
		// background-color: #fff;

		.reportcontainer {
			padding: 16upx;
		}

		.reportitem {
			background-color: #FFFFFF;
			border-radius: 8upx;
			margin-top: 16upx;
			padding-left: 16upx;
			padding-top: 16upx;
		}

		.reporttitleline {
			display: flex;
			border-bottom: solid 1upx #e6e6e6;
		}

		.reporttitlepic {
			width: 68upx;
			height: 84upx;

		}

		.reporttitlepicinner {
			width: 68upx;
			height: 68upx;
			color: #FFFFFF;
			text-align: center;
			font-size: 24upx;
			line-height: 68upx;
			padding-right: 2upx;
			background: url(../../../../static/icon/16.png);
			background-size: 100% 100%;
		}

		.reporttitlepicinner2 {
			width: 76upx;
			height: 76upx;
			color: #FFFFFF;
			text-align: center;
			font-size: 24upx;
			line-height: 73upx;
			padding-right: 2upx;
			background: url(../../../../static/icon/7.png);
			background-size: 100% 100%;
		}

		.reportuser {
			font-size: 28upx;
			color: #333333;
			line-height: 68upx;
			padding-left: 24upx;
		}

		.reportdatetime {
			font-size: 28upx;
			line-height: 68upx;
			color: #333333;
			padding-left: 24upx;
		}

		.reportContent {}

		.reportsalfExe {
			padding-top: 24upx;
			color: #666666;
			font-size: 12px;
		}

		.reportsalfExecontent {
			display: flex;
			padding-top: 24upx;
			padding-bottom: 24upx;
		}

		.reportsalfExeimg {
			width: 88upx;
			height: 88upx;
			margin-right: 20upx;
			background: url(../../../../static/icon/attachment.png);
			background-size: 100% 100%;
		}

		.reportsalfExeimg image {
			position: relative;
			left: 28upx;
			top: 28upx;
			width: 32upx;
			height: 32upx;
		}
		.botton-btn-st{
				position: fixed;
				bottom: 20upx;
				width: 96%;
				left: 2%;
				
			}
	}
</style>
